<template>
    <div class="comment-item" @click="click">
        <div class="user">
            <el-image class="avatar" :src="item.user_arr.avatar" fit="cover" alt="">
                <div slot="error" class="image-slot">
                    <i class="el-icon-s-custom"></i>
                </div>
            </el-image>
            <div class="user-info">
                {{item.user_arr.nickname}}
                <div>{{item.createtime_str}}</div>
            </div>

        </div>
        <div class="comment-text">
            {{item.info}}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'commentItem',
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                nameColr: false,
                appShow: false
            };
        },
        mounted() {},
        methods: {
            click() {
                this.$emit('click', this.item)
            },
        },
    };
</script>

<style lang="scss" scoped>
    .image-slot {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #F2F6FC;
        width: 50px;height: 50px;text-align: center;line-height: 50px;background-color: #F2F6FC;
        .el-icon-s-custom{
            color: #909399;font-size:24px;
        }
    }

    .comment-item {
        padding-top: 15px;

        .user {
            display: flex;
            align-items: center;

            .avatar {
                width: 50px;
                height: 50px;
                border-radius: 50px;
                overflow: hidden;
                margin-right: 15px;
            }



            .user-info {
                font-size: 16px;
                color: #333333;

                div {
                    font-size: 12px;
                    color: #999999;
                }
            }
        }

        .comment-text {
            padding-top: 4px;
            padding-bottom: 20px;
            padding-left: 65px;
        }
    }
</style>